import React from 'react'
import { useState, useEffect, useLayoutEffect } from 'react'
import{ Route } from 'react-router-dom'
import axios from 'axios'
import Swiper1 from '../../component/swiper/Swiper'
import '../../static/iconfont.css'
import './index.css'
import { Switch } from 'antd'
import Search from '../search/Search'
export default function INdex(props) {
  // console.log(props);
  let [list, setList] = useState([])
  let [data, setData] = useState([])
  let [banner, setBan] = useState([])
  useEffect(() => {
        axios.get('/api/mobile/new/home?channel_id=1002').then(res => {
            // console.log(res);
            setData(res.data.data.slice(1))
            setBan(res.data.data[0]?.content.map(item => item.src))
        })
        axios.get('/api/mobile/waterfall?page=1&pageSize=20').then(res => {
            // console.log(res.data.data.skuInfo);
            setList(res.data.data.skuInfo)
            // console.log(list);
        })
    },[])
    const goDet = (link) => {
        props.history.push('/detail/'+ link.split('/').pop())
    }
    return (
        <div className='dboxd'>
            
            <div className='searchbox'>
                <div className='search' onClick={() => props.history.push('/search') }>
                    <span className="iconfont icon-Magnifier"></span> 
                    <span>请输入搜索关键字</span>
                </div>
            </div>

            {banner.length > 0 && <Swiper1 banner = {banner}></Swiper1>}
            <ul>
                {
                    data.map((item,index) => {
                        return <li key={index} onClick={()=>goDet(item.content[0].link)}>
                            {item.content.length === 1 && <div className='row'>
                                    <img src={item.content[0].src} />
                                </div>
                                }
                            {item.content.length === 2 && <div className='rowimages'>
                                <img src={item.content[0].src} />
                                <img src={item.content[1].src} />
                            </div>
                            }
                        </li>
                    })
                }
            </ul>
            <div>更多商品</div>
            <ul className='list'>
                
                {
                    list.map(item => {
                        return <li key={item.sort} onClick={ () => props.history.push(`/detail/${item.skuId}`)}>
                            <img src={item.images} alt="" className='banner' />
                            <div className='xx'>
                              <p className='title'>{item.skuName}</p>
                              <p className='price'>￥{parseInt(item.discountPrice)}</p>
                            </div>
                            
                        </li>
                    })
                }
            </ul>
        </div>
    )
}
